
import { useTranslation } from 'react-i18next';
import { message } from 'antd';
interface Props {
  shareLink: string | null;
}

function ShareLink({ shareLink }: Props) {
  const {t}=useTranslation();
  const copyLine = (link:any) => {
      const textArea = document.createElement('textarea');
      textArea.value = link;
      // 设置文本区域的样式以使其不可见
      textArea.style.position = 'fixed';  // Prevent scrolling to bottom of the page in MS Edge.
      document.body.appendChild(textArea);
      textArea.select(); 
      if (navigator.clipboard) {
        navigator.clipboard.writeText(link)
          .then(() => {
            message.success(t('copySuccess')); 
          })
          .catch((error) => {
            console.error('复制失败:', error);
            message.error(t('copyFail')); 
          });
      } else {
        try {
          document.execCommand('copy');
          message.success(t('copySuccess'));
        } catch (err) {
          console.error('复制失败:', err);
          message.error(t('copyFail'));
        }
      }
      document.body.removeChild(textArea);
  };

  return (
    <div className="w-full md:max-w-[510px]">
      <div className="mb-2 text-14 text-ff text-center leading-140 hidden md:block">{t('distributedConnections')}</div>
      <div className="flex h-8">
        <div className="grow bg-black text-ff  truncate text-nowrap rounded-l-sm px-5 py-1 text-16 leading-normal">
          {shareLink}
        </div>
        <button className="text-nowrap rounded-r-md bg-red px-4 py-1 text-14 leading-normal text-white" onClick={()=>copyLine(shareLink)}>
          {t('copy')}
        </button>
      </div>
    </div>
  );
}

export default ShareLink;
